import { defineComponent, type PropType, type VNode } from 'vue'

// 定义 Props 类型
interface ConfirmDialogProps {
  title: string
  confirmText?: string
  cancelText?: string
  onConfirm: () => void
  onCancel: () => void
}

export default defineComponent({
  name: 'ConfirmDialog',
  props: {
    title: { type: String as PropType<string>, required: true },
    confirmText: { type: String as PropType<string>, default: '确定' },
    cancelText: { type: String as PropType<string>, default: '取消' },
    onConfirm: { type: Function as PropType<() => void>, required: true },
    onCancel: { type: Function as PropType<() => void>, required: true }
  },
  setup(props, { slots }) {
    // 处理确认
    const handleConfirm = () => {
      props.onConfirm()
    }

    // 处理取消（包括点击遮罩层）
    const handleCancel = () => {
      props.onCancel()
    }

    // 使用 JSX 返回渲染内容
    return () => (
      <div class="fixed inset-0 z-50 flex items-center justify-center">
        {/* 遮罩层 */}
        <div
          class="fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm"
          onClick={handleCancel}
        ></div>

        {/* 对话框容器 */}
        <div class="relative bg-white w-full max-w-md rounded-lg shadow-xl overflow-hidden mx-4">
          {/* 头部 */}
          <div class="p-4 border-b border-gray-200">
            <h3 class="text-lg font-semibold text-gray-800">{props.title}</h3>
          </div>

          {/* 内容插槽 */}
          <div class="p-4">
            {slots.default ? (
              slots.default()
            ) : (
              <p>默认内容，如果需要可以在调用时通过 slot 覆盖。</p>
            )}
          </div>

          {/* 底部按钮 */}
          <div class="p-4 bg-gray-50 border-t border-gray-200 flex justify-end space-x-3">
            <button
              onClick={handleCancel}
              class="px-4 py-2 rounded-md text-sm font-medium text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
            >
              {props.cancelText}
            </button>
            <button
              onClick={handleConfirm}
              class="px-4 py-2 rounded-md text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
            >
              {props.confirmText}
            </button>
          </div>
        </div>
      </div>
    )
  }
})
